<template>
 <div >
     <home-header ></home-header>
     <home-swiper :swiperList="swiperList"></home-swiper>
     <home-icons  :iconList="iconList"></home-icons>
     <home-recommend :recommendList="recommendList"></home-recommend>
     <home-weekend :weekendList="weekendList"></home-weekend>
 </div>
</template>

<script type="text/ecmascript-6">
 import HomeHeader from "./components/header.vue"
 import HomeSwiper from "./components/swiper.vue"
 import HomeIcons from "./components/icons.vue"
 import HomeRecommend from "./components/recommend.vue"
 import HomeWeekend from "./components/weekend.vue"
 import axios from 'axios'
 import {mapState} from "vuex"
 export default {
 name:'Home',
 data () {
    return {
        lastCity:'',
        swiperList:[],
        iconList:[],
        recommendList:[],
        weekendList:[]

    }
 },
 methods:{
     getHomeInfo(){
         axios.get('/api/index.json?city='+this.city ).then(this.getHomeInfoSucc)
     },
     getHomeInfoSucc(res){
         res = res.data
         if(res.ret && res.data){
            this.swiperList = res.data.swiperList
            this.iconList = res.data.iconList
            this.recommendList = res.data.recommendList
            this.weekendList = res.data.weekendList

         }
         console.log(res)
     }
 },
    computed:{
        ...mapState(['city'])
    },
    mounted(){
        this.lastCity = this.city
        this.getHomeInfo()
    },
    activated(){
        // 使用keep-alive后任然会执行 重新显示时执行
        if(this.lastCity !==this.city){
            this.lastCity = this.city
            this.getHomeInfo()
        }

    },
    props: {

    },
    components: {
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
    }

 }
</script>

<style>

 
</style>
